import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  ListView,
  SectionList,
  Text,
  TouchableOpacity,
  TouchableHighlight
} from 'react-native'
import {Icon} from '../common/icon'
import { SwipeListView, SwipeRow } from 'react-native-swipe-list-view'
import getIcon from '../common/icon/iconFontMap'

class ScenceList extends Component {
  constructor(props) {
    super(props)

    this.state = {
      refreshing: false
    }
  }

  render() {
    return (
      <View>
        <SectionList
          sections={this.props.data}
          renderItem={({item}) => {
            let icon = getIcon(item.name)
            return (
              <SwipeRow rightOpenValue={-66} disableRightSwipe={true}>
                <View style={styles.standaloneRowBack}>
                  <Text style={styles.backTextWhite}>删除</Text>
                </View>
                <View style={styles.standaloneRowFront}>
                  <Icon name={icon.name} size={32} color={icon.color} style = {styles.itemIcon} />
                  <Text style={styles.itemText}>{item.name}</Text>
                  <Icon name="icon_jiantou" size={16} color="#999999" />
                </View>
              </SwipeRow>
            )
          }}
          renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.name}</Text>}
          keyExtractor={(item, index) => index}
          refreshing={this.state.refreshing}
          onRefresh={this._onRefresh}
        />
      </View>
    )
  }
  _onRefresh() {
    this.setState({
      refreshing: true
    })
  }
}

export default ScenceList

const styles = StyleSheet.create({
  swiperContainer: {
    backgroundColor: '#ffffff',
    flex: 1,
  },
  standaloneRowFront: {
		alignItems: 'center',
    backgroundColor: '#fff',
    flexDirection: 'row',
		justifyContent: 'space-between',
    height: 56,
    paddingLeft: 10,
    paddingRight: 20,
	},
	standaloneRowBack: {
		alignItems: 'center',
		backgroundColor: '#FF4D4D',
		flex: 1,
		flexDirection: 'row',
		justifyContent: 'flex-end',
		padding: 15
	},
  rowFront: {
		alignItems: 'center',
		backgroundColor: '#ffffff',
		justifyContent: 'center',
		height: 56,
  },
  rowBack: {
		alignItems: 'center',
		backgroundColor: '#fff',
		flex: 1,
		flexDirection: 'row',
		justifyContent: 'space-between',
		paddingLeft: 15,
	},
	backRightBtn: {
		alignItems: 'center',
		bottom: 0,
		justifyContent: 'center',
		position: 'absolute',
		top: 0,
		width: 66
	},
	backRightBtnLeft: {
		backgroundColor: 'blue',
		right: 66
	},
	backRightBtnRight: {
		backgroundColor: 'red',
		right: 0
  },
  backTextWhite: {
		color: '#FFF'
  },
  sectionHeader: {
    paddingTop: 10,
    paddingLeft: 15,
    paddingRight: 15,
    paddingBottom: 3,
    fontSize: 14,
    color: '#333333',
    backgroundColor: '#ffffff',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 48,
  },
  itemIcon: {
    marginLeft: 10,
    marginRight: 10,
  },
  itemText: {
    flex: 1,
    fontSize: 14,
    color: '#333333',
  },
})
